<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../jcrop/js/jquery.Jcrop.js"></script>	 
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="../jcrop/css/jquery.Jcrop.css">

<style>
.navigateButton
{
	padding: 10px;
	cursor: pointer;
}
</style>
<title>Edit Avatar</title>
<script>
$(function(){ $('#jcrop_target').Jcrop({
	onChange: showCoords,
	onSelect: showCoords,
	aspectRatio: 1
}); });
function back()
{
	window.location.href="editAvatar.jsp";
}
function showCoords(c)
{
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#w').val(c.w);
	$('#h').val(c.h);
}
</script>
</head>
<body>
<jsp:include page="../WEB-INF/head.jsp"></jsp:include>
<div id="mainForm">
<font class="bigBlue">Edit account data</font><hr>
<jsp:include page="lft_editData_navi.jsp"></jsp:include>
<div class="roundRec" style="margin-left: 240px;">
Crop the avatar image.<hr>
<font size="2px;">Resize your image until meet your satisfaction</font><br><br>

<img src="../${resultFileName }" id="jcrop_target">
<br>
<form action="cropAction!cropImage.action">
X1<input type="text" id="x" style="width:30px;"name="x">;
Y1<input type="text" id="y" style="width:30px;"name="y">;
X2<input type="text" id="x2" style="width:30px;">;
Y2<input type="text" id="y2" style="width:30px;">;
W<input type="text" id="w" style="width:30px;" name="w">;
H<input type="text" id="h" style="width:30px;" name="h">;
<input type="submit" value="Done" >
<input type="button" value="Back" onclick="back()"><br>
<input type="text" name="targetFileName"value="${resultFileName }" style="visibility:hidden;"/>
</form>
</div>
</div>

</body>
<script>
$("#editDataNavi1").addClass("selected2");
</script>
</html>